<template>
    <div>
        <el-row style="font-weight: bolder">采集策略配置</el-row>
        <el-form ref="formRef"
            style="border-left: 1px solid #ecedef;border-right: 1px solid #ecedef;border-top: 1px solid #ecedef;border-bottom: 1px solid #ecedef;padding: 10px 0 20px">
            <el-row style="height: 40px;padding-left: 15px;width: 100%">
                <el-form-item label="车辆用途:" class="label-bolder" style="margin-right:30px">
                    <el-checkbox :indeterminate="carPurposeIsIndeterminate" v-model="carPurposeCheckAll"
                        @change="carPurposeCheckAllChange" style="width: 95px" border>全部
                    </el-checkbox>
                </el-form-item>
                <el-form-item class="label-bolder">
                    <el-checkbox-group v-model="carPurposeTypeCheck" @change="carPurposeTypeChange">
                        <el-checkbox v-for="type in typeOptions" :label="type.value" :key="type" style="width: 95px" border>
                            {{ type.label }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-row>
            <el-row style="height: 15px" />        

            <el-row style="height: 40px;padding-left: 15px">
                <el-form-item label="采集时长:" style="color: black; padding-left: 5px; padding-right: 10px;">
                    <el-col style="font-weight: lighter;width: 50px"> 触发前</el-col>
                </el-form-item>
                <el-form-item>
                    <el-input-number v-model="collectTimeBefore" controls-position="right" @change="beforeTriggering"
                        :min="0" :max="15" label="描述文字" style="width: 135px"></el-input-number>
                </el-form-item>
                <el-form-item style="width: 10px" />
                <el-form-item>
                    <el-col style="font-weight: lighter"> ~</el-col>
                </el-form-item>
                <el-form-item style="width: 10px" />
                <el-form-item style="color: black; padding-left: 5px; padding-right: 10px;">
                    <el-col style="font-weight: lighter;width: 50px"> 触发后</el-col>
                </el-form-item>
                <el-form-item>
                    <el-input-number v-model="collectTimeAfter" controls-position="right" @change="afterTriggering" :min="0"
                        :max="14" label="描述文字" style="width: 130px" />
                </el-form-item>
            </el-row>
            <el-row style="height: 15px" />

            <el-row style="height: 40px;padding-left: 15px">
                <el-form-item label="采集频次:" style="color: black; padding-left: 5px; padding-right: 10px;">
                </el-form-item>
                <el-form-item>
                    <el-select v-model="cycle" class="m-2" placeholder="Select" @change="cycleChangeFn">
                        <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 10px" />
                <el-form-item>
                    <el-col style="font-weight: lighter">
                        <span>~</span>
                    </el-col>
                </el-form-item>
                <el-form-item style="width: 10px" />
                <el-form-item style="color: black; padding-left: 5px; padding-right: 10px;">
                    <el-col style="font-weight: lighter;"> 触发</el-col>
                </el-form-item>
                <el-form-item>
                    <!--                    <el-input-number v-model="triggerCount" controls-position="right" :min="1" :max="50" label="描述文字"-->
                    <!--                                     @change="triggerCountFn"-->
                    <!--                                     style="width: 130px;font-weight: lighter"/>-->
                    <el-input-number v-model="triggerCount" controls-position="right" :min="1" label="描述文字"
                        @change="triggerCountFn" style="width: 130px;font-weight: lighter" />
                    次
                </el-form-item>
            </el-row>
            <el-row style="height: 15px" />
            <el-row style="height: 40px;padding-left: 15px">
                <el-form-item label="触发性能监控的故障等级（取值范围0-9）:" style="color: black; padding-left: 5px; padding-right: 10px;">
                </el-form-item>
                <el-form-item>
                    <el-input-number v-model="plogFaultLevel" :min="0" :max="9" @change="plogFaultLevelChange"
                        placeholder="取值范围0-9" />
                </el-form-item>
            </el-row>
            <el-row style="height: 40px;padding-left: 15px">
                <el-form-item label="数据上云自动压测:" style="color: black; padding-left: 5px; padding-right: 10px;">
                </el-form-item>
                <el-form-item>
                    <el-switch v-model="dataPload" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" @change="dataPloadChange" />
                </el-form-item>
            </el-row>


            <el-row style="height: 40px;padding-left: 15px">
                <el-form-item label="开启性能监控:" style="color: black; padding-left: 5px; padding-right: 10px;">
                </el-form-item>
                <el-form-item>
                    <el-switch v-model="plogLongtermMonitor" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @change="plogLongtermMonitorChange" />
                </el-form-item>
            </el-row>
            <!-- <el-row>
            <el-row style="height: 40px;padding-left: 15px">
                <el-form-item label="全量日志上传:" style="color: black; padding-left: 5px; padding-right: 10px;">
                </el-form-item>
                <el-form-item>
                    <el-switch v-model="uploadAllLog" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @change="switchChange('uploadAllLog', uploadAllLog)" />
                </el-form-item>
            </el-row>
            <el-row v-if="projectObj.name.includes('EP40') || projectObj.name.includes('EP41')" style="height: 40px;padding-left: 15px">
                    <el-form-item label="全量日志最大采集量:" style="color: black; padding-left: 5px; padding-right: 10px;">
                        <el-input-number v-model="allLogMax" :min="0" :max="5120" @change="allLogMaxChange"
                            placeholder="" />
                    </el-form-item>
            </el-row>
            </el-row> -->
            <!-- <el-row v-if="projectObj.name === 'EP41_ORIN'">
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="德赛日志上传:" style="color: black; padding-left: 5px; padding-right: 10px;">
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="desayLogUpload" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('desayLogUpload', desayLogUpload)" />
                    </el-form-item>
                </el-row>
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="德赛日志最大采集量:" style="color: black; padding-left: 5px; padding-right: 10px;">
                        <el-input-number v-model="desayLogMax" :min="0" :max="5120" @change="desayLogMaxChange"
                            placeholder="" />
                    </el-form-item>
                </el-row>
            </el-row> -->
            <el-row>
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="CAN采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="canCollect" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('canCollect', canCollect)" />
                    </el-form-item>
                </el-row>
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="ETH采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="ethCollect" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('ethCollect', ethCollect)" />
                    </el-form-item>
                </el-row>
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="Calibration采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="calibrationCollect" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('calibrationCollect', calibrationCollect)" />
                    </el-form-item>
                </el-row>
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="Fault采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="faultCollect" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('faultCollect', faultCollect)" />
                    </el-form-item>
                </el-row>
                <!-- <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="Log采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="logCollect" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('logCollect', logCollect)" />
                    </el-form-item>
                </el-row> -->
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="SC采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                        <template #label>
                            <el-tooltip class="box-item" effect="dark" placement="top-start">
                                <template #content>
                                    Orin不生效 
                                </template>
                                <span>
                                    SC采集<i class="el-icon-question"></i>:
                                </span>
                            </el-tooltip>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="scCollect" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('scCollect', scCollect)" />
                    </el-form-item>
                </el-row>
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="Trigger采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="collect" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('collect', collect)" />
                    </el-form-item>
                </el-row>
            </el-row>
            <el-row>
                <!-- <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="Trigger中视频采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="scFlag" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('scFlag', scFlag)" />
                    </el-form-item>
                </el-row> -->
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="CameraLog采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                        <template #label>
                            <el-tooltip class="box-item" effect="dark" placement="top-start">
                                <template #content>
                                    仅对J3生效
                                </template>
                                <span>
                                    CameraLog采集<i class="el-icon-question"></i>:
                                </span>
                            </el-tooltip>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="cameraLogCollect" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('cameraLogCollect', cameraLogCollect)" />
                    </el-form-item>
                </el-row>
                <el-row style="height: 40px;padding-left: 15px">
                    <el-form-item label="MonitorLog采集:" style="color: black; padding-left: 5px; padding-right: 10px;">
                        <template #label>
                            <el-tooltip class="box-item" effect="dark" placement="top-start">
                                <template #content>
                                    仅对Orin生效
                                </template>
                                <span>
                                    MonitorLog采集<i class="el-icon-question"></i>:
                                </span>
                            </el-tooltip>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-switch v-model="monitorLogCollect" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="switchChange('monitorLogCollect', monitorLogCollect)" />
                    </el-form-item>
                </el-row>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";

const store = useStore();
const projectObj = computed(() => store.state.projectObj);
let typeOptions = [{label: '量产车',value:0},{label: '研发车',value:1},{label: '台架',value:2}];
//车辆用途
const carPurposeTypeCheck = ref([0,1,2]);
const carPurposeIsIndeterminate = ref(false);
const carPurposeCheckAll = ref(true);

const reqConfigData = reactive({
    vehicleUseType: [0,1,2],
    // vehicleType: [],
    // domainControlType: [],
    collectTimeBefore: 8,
    collectTimeAfter: 6,
    cycle: 'day',
    triggerCount: 99999,
    dataPload: 0,
    plogFaultLevel: 0,
    plogLongtermMonitor: 0,
    uploadAllLog: 0,
    canCollect: 1,
    ethCollect: 1,
    calibrationCollect: 1,
    faultCollect: 1,
    // logCollect: 1,
    scCollect: 1,
    cameraLogCollect: 1,  
    monitorLogCollect: 1,   // MonitorLog采集
    collect: 1,
    // scFlag: 1,         // trigger中视频采集
    desayLogUpload: 0,   // 德赛日志上传开关
    desayLogMax: 1500,    //德赛日志最大采集量  单位MB
    allLogMax: 2048,    //全量日志最大采集量  单位MB，默认值2G
})

const carPurposeObj = {
    '量产车': 0,
    '研发车': 1,
    '台架': 2
};
const domainControlObj = {
    "MDC": 0,
    "TDA4": 1,
    "J3": 2,
    "ADC": 3,
}

const cycleOptions = [
    {
        value: 'day',
        label: '天',
    },
    {
        value: 'month',
        label: '月',
    },
]

const emit = defineEmits();


const collectTimeBefore = ref(8);
const collectTimeAfter = ref(6);
const triggerCount = ref(99999);
const dataPload = ref(0);
const plogFaultLevel = ref(0);
const plogLongtermMonitor = ref(0);
const uploadAllLog = ref(0);
const canCollect = ref(true);
const ethCollect = ref(true);
const calibrationCollect = ref(true);
const faultCollect = ref(true);
// const logCollect = ref(true);
const scCollect = ref(true);
const collect = ref(true);
// const scFlag = ref(true); 
const cameraLogCollect = ref(true); 
const monitorLogCollect = ref(true); 
const cycle = ref('day');
const desayLogUpload = ref(0)
const desayLogMax = ref(1500)
const allLogMax = ref(2048)

const beforeTriggering = () => {

    // if (collectTimeBefore.value + collectTimeAfter.value > 14) {
    //     ElMessage.error("采集总时长需 <= 14S");
    //     collectTimeAfter.value = 14 - collectTimeBefore.value;
    // } else {
    //     reqConfigData.collectTimeBefore = collectTimeBefore.value;
    // }

    reqConfigData.collectTimeAfter = collectTimeAfter.value;
    reqConfigData.collectTimeBefore = collectTimeBefore.value;

    emit('checkChangeFn', reqConfigData)

}

const afterTriggering = () => {

    // if (collectTimeBefore.value + collectTimeAfter.value > 14) {
    //     ElMessage.error("采集总时长需 <= 14S");
    //     collectTimeBefore.value = 14 - collectTimeAfter.value;
    // } else {
    //     reqConfigData.collectTimeAfter = collectTimeAfter.value;
    // }

    reqConfigData.collectTimeAfter = collectTimeAfter.value;
    reqConfigData.collectTimeBefore = collectTimeBefore.value;
    emit('checkChangeFn', reqConfigData)
}
const cycleChangeFn = () => {
    reqConfigData.cycle = cycle.value;
    emit('checkChangeFn', reqConfigData)
}

const triggerCountFn = () => {
    reqConfigData.triggerCount = triggerCount.value;
    emit('checkChangeFn', reqConfigData)
}

const carPurposeCheckAllChange = (val) => {
    // console.log(222,val)
    carPurposeTypeCheck.value = val ? [0,1,2] : []
    carPurposeIsIndeterminate.value = false;
    if (val) {
        reqConfigData.vehicleUseType = [0,1,2];
    }else{
        reqConfigData.vehicleUseType = [];
    }

    emit('checkChangeFn', reqConfigData)
}

const carPurposeTypeChange = (value) => {
    console.log('1231',value)
    const checkedCount = value.length;
    carPurposeCheckAll.value = checkedCount === typeOptions.length;
    carPurposeIsIndeterminate.value = checkedCount > 0 && checkedCount < typeOptions.length;
    // value = value.map(item => {
    //     return carPurposeObj[item]
    // })
    reqConfigData.vehicleUseType = value;
    emit('checkChangeFn', reqConfigData)
}
const plogFaultLevelChange = (value) => {
    reqConfigData.plogFaultLevel = value;
    emit('checkChangeFn', reqConfigData)
}
const dataPloadChange = (value) => {
    reqConfigData.dataPload = +value;
    emit('checkChangeFn', reqConfigData)
}
const plogLongtermMonitorChange = (value) => {
    reqConfigData.plogLongtermMonitor = +value;
    emit('checkChangeFn', reqConfigData)
}
const switchChange = (name, value) => {
    reqConfigData[name] = +value;
    emit('checkChangeFn', reqConfigData)
}
const desayLogMaxChange = (value) => {
    reqConfigData.desayLogMax = value;
    emit('checkChangeFn', reqConfigData)
}
const allLogMaxChange = (value) => {
    reqConfigData.allLogMax = value;
    emit('checkChangeFn', reqConfigData)
}
</script>
